<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>南国早报客户端征名</title>
    <style type="text/css">
    	*{border:0;margin:0;padding:0;}
		body{background-color: #2fa0ae;}
    	.wrap>div{overflow:hidden;position:relative;}
    	.wrap>div input{position:absolute;z-index: 2;top:15%;right:12%;width:53%;height:70%;background-color:rgba(0,0,0,0);color:#fff;text-indent: 1em;}
    	img{max-width: 100%;display:block;}
		input{-webkit-appearance:none;caret-color:#fff;outline:0;}
		input:focus{-webkit-appearance:none;color:#fff;caret-color:#fff;outline:0;}
		input:hover{-webkit-appearance:none;color:#fff;caret-color:#fff;outline:0;}
    </style>
</head>
<body>
	<div class="wrap">
		<div><img src="imgs/appname_01.jpg"/></div>
		<div><img src="imgs/appname_02.jpg"/></div>
		<div><img src="imgs/appname_03.jpg"/></div>
		<div><img src="imgs/appname_04.jpg"/></div>
		<div><img class="inp" src="imgs/appnameB_02.jpg"/><input class="inpObj" type="text" /></div>
		<div><img class="inp" src="imgs/appnameB_03.jpg"/><input class="inpObj" type="number" /></div>
		<div><img class="inp" src="imgs/appnameB_04.jpg"/><input class="inpObj" type="text" /></div>
		<div><img class="inp" src="imgs/appnameB_05.jpg"/><input class="inpObj" type="text" /></div>
		<div><img class="sure" src="imgs/appnameB_06.jpg"/></div>
		<div><img class="submit" src="imgs/appname_10.jpg"/></div>
		<div style="
    margin: 10%;
	margin-top:5%;
	padding-top:5%;
    color: #fff;
    background-color: #2fa0ae;
    font-size: 12px;
    line-height: 1.6em;
    font-family: microsoft yahei;
    font-weight: 100;
    border-top: 1px #fff dashed;
">比赛说明：<br>
1、以上奖项不累计享受，最终获奖将由南国早报评委审定+名字线上票数两项分数相加，分数高者入围。<br>
2、如遇名称相同者，则以提交系统的时间优先者为准，截止时间2017年9月11日。<br>
3、APP名字一经线上提交完成，即代表用户同意南国早报方拥有该名字的知识产权及后期商业应用及开发的一切权限。<br></div>
	</div>
	<script>
		;(function(){
			//资源管理
			var inps1 = ["imgs/appname_05.jpg","imgs/appname_06.jpg","imgs/appname_07.jpg","imgs/appname_08.jpg","imgs/appname_09.jpg"];
			var inps2 = ["imgs/appnameB_02.jpg","imgs/appnameB_03.jpg","imgs/appnameB_04.jpg","imgs/appnameB_05.jpg","imgs/appnameB_06.jpg"];
			//预加载
			document.createElement('img').src=inps1[0];
			document.createElement('img').src=inps1[1];
			document.createElement('img').src=inps1[2];
			document.createElement('img').src=inps1[3];
			document.createElement('img').src=inps1[4];
			
			//输入事件
			var inpObjs = document.querySelectorAll('.inpObj');
			var inpObjsArr = [];
			var inpImgs = document.querySelectorAll('.inp');
			inpObjs.forEach(function(obj,index){
				obj.onfocus = function(e){
					if(this.value) return;
					inpImgs[index].src = inps1[index];	
				};
				obj.onblur = function(e){
					if(this.value) return;
					inpImgs[index].src = inps2[index];	
				};
				inpObjsArr.push(obj);
			});
			
			//确认事件
			var sure = document.querySelector('.sure');
			sure.onclick = (function(){
				var toggle = true;
				return function(){
					if(toggle){
						sure.src = inps1[4];
					}else{
						sure.src = inps2[4];
					}
					this.value = toggle = !toggle;
				}
			})();
			
			//提交表单
			var submit = document.querySelector('.submit');
			submit.onclick = function(){
				if(inpObjsArr.every(function(obj){return !!obj.value})&&!sure.value){
					console.log('验证各个选项都不是空白');
				}else{
					console.log('请填入信息或确认');
				}
			};
		})();
	</script>
</body>
</html>